<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            padding-left: 26px;
            box-sizing: border-box;
        }
        #wrap div{
            width: 18%;
            height: 400px;
            margin: 10px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #000;
            font-size: 14px;
            line-height: 14px;
        }
        #wrap div img{
            width: 100%;
            height: 200px;
        }

        #wrap div p span{
            color: red;
        }
    </style>
</head>
<body>
    <img src="" alt="">
    <div>
        <button id="priceBtn">按价格排序</button>
        <button id="evaluateBtn">按销量排序</button>
        <button id="salesBtn">按评论排序</button>
        <button id="sj">升降</button>
    </div>
    <section id="wrap">

    </section>
    <script src="作业.js"></script>
    <script>
        // 点击按价格排序
        priceBtn.onclick = function(){
            // 清空
            wrap.innerHTML = ''
            // 排序
            data.sort(function(a,b){
                return b.sale - a.sale
            })
            // 添加
            fn()
        }
        evaluateBtn.onclick = function(){
            wrap.innerHTML = ''
            data.sort(function(a,b){
                return b.evaluate - a.evaluate
            })
            
            fn()
        }
        salesBtn.onclick = function (){
            wrap.innerHTML = ''
            data.sort(function(a,b){
                return b.sales - a.sales
            })
            fn()
        

        }
        sj.onclick = function(){
            wrap.innerHTML = ''
            data.reverse()
            fn()
        }

        function fn (){
                for(var i = 0 ; i < data.length;i++){
                wrap.innerHTML += '<div>' +
                        '<img src = "' + data[i].imgurl + '">'+
                        '<h2>'+ data[i].name +'</h2>'+
                        '<p>颜色：' + data[i].color + '</p>'+
                        '<p>原价：<del>' +  data[i].price + '</del></p>'+
                        '<p>现价：<span>￥' + data[i].sale + '<span></p>' +
                        '<p>销量：' + data[i].evaluate + '</p>' +
                        '<p>评论：' + data[i].sales + '</p>'+
                        '</div>'
            }
        }
        fn()
    </script>
</body>
</html>